<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.container{
			width: 880px;
			height: 400px;
			border: 1px solid olive;
			margin: 30px auto;
			display: flex;
			justify-content: center;
			align-items: center;

		}
		.container img{
			width: 100%;
			height: 100%;

		}
		.left_page{
			width: 200px;
			height: 150px;
			z-index: 1;
			filter: blur(2px);
			transition: 0.5s;
		}
		.center_page{
			width: 400px;
			height: 300px;
			z-index: 2;
			transition: 0.5s;
			box-shadow: 0 0 30px 0 gray;
		}
		.right_page{
			width: 200px;
			height: 150px;
			z-index: 1;
			filter: blur(2px);
			transition: 0.5s;
		}

	</style>
</head>
<body>
	<div class="container">
		<div class="left_page">
			<img src="./2.jpg">
		</div>
		<div class="center_page">
			<img src="./3.jpg">
		</div>
		<div class="right_page">
			<img src="./4.png">
		</div>
	</div>
</body>
<script type="text/javascript">

	let classes = ["left_page","center_page","right_page"];
	let boxs = document.querySelectorAll(".container div");


	setTimeout(function foo(){
		moveClass();
		setTimeout(foo,2000);
	},2000)


	function moveClass(){
		let shiftEle = classes.shift();
		classes.push(shiftEle);
		for(let i=0; i<boxs.length ; i++){
			boxs[i].removeAttribute("class");
			boxs[i].setAttribute("class",classes[i]);
		}
	}
</script>
</html>
